<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>H5_NewTags</title>
	<base target="_self">
	<style class='baseStyle'>
		*{margin:0;padding: 0;}
		a{color:inherit;text-decoration:none;outline:none;}
		a:hover{color:orange;text-decoration: underline;}
		body{
			font-family: '仿宋',Arial,'Microsoft yahei', Verdana,  Helvetica, sans-serif;
			font-size: 18px;
			padding-bottom: 200px;
		}
		.clearfix:after{
			visibility:hidden;
			content: '.';
			display: block;
			clear: both;
		}
		.clearfix{
			*zoom:1;
		}

		header{
			padding: 20px 0;
			text-align: center;

		}
		#construction{
			border:1px solid #ccc;
			background: rgba(211, 0, 252, 0.86);
			color:#eee;
			line-height: 1.6em;
		}
		#construction h4{
			margin-top:10px;
			color: #abcedf;
		}
		#construction p{
			padding-left: 1em;
			white-space: pre-wrap;
		}
		#aside-nav{
			position: fixed;
			right: 5%;
			top: 10%;
			display: none;
			flex-flow:column;
			color:rgba(255,255,255,1);
		}
		
		#top{
			display: none;
			position: fixed;
			right: 5%;
			bottom: 5%;
			text-align: center;
			width:35px;
			height: 35px;
			border-radius: 100%;
			line-height: 35px;
			box-shadow: 1px 1px 1px rgba(0,0,0,.5);
			cursor: pointer;
			color: #000;
			font-weight: bold;
			z-index: 9999;
		}
		section:not(.knowledege){
			position: relative;
			margin-top:100px;
		}
		section:not(.knowledege) p{
			position: absolute;
			top:0;
			left: 0;
			white-space: pre-line;
		}
	</style>
	<style class='classroom'>
		.example{
			position: relative;
			width: 100%;
		}
		.example>h2{
			margin: 50px auto;
			text-align: center;
		}
		.example>nav{
			position: absolute;
			margin: 50px auto;
			left: 0;
			top:0;
			width: 20%;
			display: flex;
			flex-flow:column wrap;
		}
		.example>nav>a{
			display: block;
			text-align: left;
			margin: 5px;
		}
		.example>iframe{
			position: absolute;
			top:0;
			right: 0;
			display: block;
			margin: 50px auto;
			width: 80%;
			height: 800px;
			background-color: rgba(0,0,0,.1);
		}
	</style>
</head>
<body>
	<header class="true">
		<h1 id='h-title'>17_baidu地图</h1>
		<a href="homeWork.html" target="_self">作业</a>
		<a href="../index.html" target="_self">返回目录</a>
	</header>
	<section class='knowledege'>
		<aside id='aside-nav'>
			<nav>
			</nav>
		</aside>
		<div id=top>Top</div>
		<article id='construction'>
			<h4>目录</h4>
			<p>
				地理位置信息
				cookie
				本地存储
			</p>
			<h4>地理位置</h4>
			<p>
				地理位置
				经度  :   南北极的连接线
				纬度  :   东西连接的线

				位置信息从何而来
				IP地址
				GPS全球定位系统
				Wi-Fi无线网络
				基站

			</p>
			<h4>几种地位方式</h4>
			<p>
				1-HTML5中ip地址
					其实在中国IP地址还是比较准确，书上说不准确，很多时候获取的是ISP机房的位置，但是获取非常方便，没有什么限制。但是实际上我觉得在中国，ip地址还是比较准确的，基本上上能精确到小区或大楼的标准

				2、HTML5中GPS定位操作
					GPS定位非常准确，但是需要在户外，且需要很长时间搜索卫星。但前提就是硬件设备要支持GPS。

				3、WiFi基站的mac地址。
					连接位置已知的公共WiFi的时候，通过Mac地址识别WiFi接入点，从而定位。这种定位的精度还是很不错的，而且还可以在室内定位。不过由于这种位置公开的wifi比较少，此种方法的适用范围比较少。

				4、GSM或CDMA基站
					通过基站定位，精度随基站密度变化，精度一般，还是只有手机能用。看来地理位置API还是手机上比较有实用性。

				地理位置获取流程步骤：

				1、用户打开需要获取地理位置的web应用。

				2、应用向浏览器请求地理位置，浏览器弹出询问窗口，询问用户是否共享地理位置。

				3、假设用户允许，浏览器从设备查询相关信息。

				4、浏览器将相关信息发送到一个信任的位置服务器，服务器返回具体的地理位置。

			</p>
			<h4>地理位置优劣</h4>
			<p>
				<img src="case/图片1.png" alt="">
			</p>
			<h4>地理位置对象</h4>
			<p>
				地理位置对象

				navigator.geolocation
				【单次定位请求】  ：getCurrentPosition(请求成功，请求失败，数据收集方式)
				请求成功函数
				经度 :  coords.longitude
				纬度 :  coords.latitude
				准确度 :  coords.accuracy
				海拔 :  coords.altitude
				海拔准确度 :  coords.altitudeAcuracy
				行进方向 :  coords.heading
				地面速度 :  coords.speed
				时间戳 : new Date(position.timestamp)

				<a href="http://www.gpsspg.com/maps.htm">http://www.gpsspg.com/maps.htm</a>

				地理位置对象_2
				navigator.geolocation
				 请求失败函数
				失败编号  ：code
				0  :  不包括其他错误编号中的错误
				1  :  用户拒绝浏览器获取位置信息
				2  :  尝试获取用户信息，但失败了
				3  :   设置了timeout值，获取位置超时了
				数据收集 :  json的形式
				enableHighAcuracy  :  更精确的查找，默认false
				timeout  :  获取位置允许最长时间，默认infinity
				maximumAge :  位置可以缓存的最大时间，默认0


				地理位置对象_3
				navigator.geolocation
				多次定位请求【如果位置不停在改变，就需要多次请求】  :  watchPosition(像setInterval)
				移动设备有用，位置改变才会触发
				配置参数：frequency 更新的频率

				关闭更新请求  :  clearWatch(像clearInterval)

				创建基于地图的应用
				百度地图简介文档
				http://lbsyun.baidu.com/index.php?title=jspopular/guide/introduction
				百度地图API调用
				http://developer.baidu.com/map/jsdemo.htm#a1_2
				http://www.gpsspg.com/maps.htm 查询经纬度网站
		
			</p>
			<h4>Cookie</h4>
			<p>
				数据存储到计算机中，通过浏览器控制添加与删除数据
				Cookie的特点
				存储限制
				域名100个cookie,每组值大小4KB
				客户端、服务器端，都会请求服务器（头信息）
				页面间的cookie是共享

				cookie的作用
				页面用来保存信息
				同一个网站中所有页面共享一套cookie
				cookie的使用
				设置cookie 过期时间expires
				读取cookie 字符串分割
				删除cookie 已经过期
				例子：
				Cookie登录后删除信息
			</p>
			<h4>Storage</h4>
			<p>
				Storage

				sessionStorage
				session临时回话，从页面打开到页面关闭的时间段
				窗口的临时存储，页面关闭，本地存储消失
				localStorage
				永久存储（可以手动删除数据）
				Storage的特点
				存储量限制 ( 5M )
				客户端完成，不会请求服务器处理
				sessionStorage数据是不共享、 localStorage共享

				Storage API
				setItem():
				设置数据，key\value类型，类型都是字符串
				可以用获取属性的形式操作
				getItem():
				获取数据，通过key来获取到相应的value
				removeItem():
				删除数据，通过key来删除相应的value
				clear():
				删除全部存储的值
				例子 :  保存注册信息

				Storage API
				存储事件:
				当数据有修改或删除的情况下，就会触发storage事件
				在对数据进行改变的窗口对象上是不会触发的
				Key : 修改或删除的key值，如果调用clear(),key为null
				newValue  :  新设置的值，如果调用removeStorage(),key为null
				oldValue :  调用改变前的value值
				storageArea : 当前的storage对象
				url :  触发该脚本变化的文档的url
				注：session同窗口才可以,例子：iframe操作
			</p>
		</article>
	</section>
	<section class='example'>
		<h2>案例展示:</h2>
		<nav>
			<a href="case/geo.html" target="case"></a>
		</nav>
		<iframe name='case' src="homeWork.html" frameborder="0"></iframe>
	</section>
	<footer class='true'>
		
	</footer>
	<script class='base'>
		(function(){
			var asideNav = document.getElementById('aside-nav'),//导航
				oCons = document.getElementById('construction'),//内容
				oh4 = oCons.querySelectorAll('h4');
				frag = document.createDocumentFragment(),//Dom碎片
				createObj = null,
				min = oCons.offsetTop,
				max = min + oCons.scrollHeight,
				aTop = document.getElementById('top');
				
			for (var i = 0; i < oh4.length; i++) {
				createObj = document.createElement('a');
				createObj.innerText = oh4[i].innerText;
				oh4[i].id='title'+i;
				createObj.href = '#' + oh4[i].id;
				frag.appendChild(createObj);
			}
			asideNav.appendChild(frag);
			//addEventListener
			document.addEventListener('scroll',function(){
				var top = document.body.scrollTop;
				var bHeight = document.body.scrollHeight;
				if(top>min+200 && top<max){
					asideNav.style.display = 'flex';
				}else{
					asideNav.style.display = 'none';
				}
				if(top>bHeight/5){
					aTop.style.display = 'block';
				}else{
					aTop.style.display = 'none';
				}
			},false);
			aTop.onclick = function(e){
				e = e || window.event;
				e.preventDefault();
				m();
				function m(){
					var top = document.body.scrollTop;
					top -= 100;
					document.body.scrollTop = top;
					if(top>0){
						requestAnimationFrame(m);
					}
				}
			};
		})();
	</script>
	<script class='example'>
		(function(){
			var hTitle = document.getElementById('h-title'),
				otitle = document.querySelector('head title');
			otitle.innerText = hTitle.innerText;
			
			var oCase = document.querySelectorAll('.example>nav>a'),
				length = oCase.length;
			for (var i = 0; i < length; i++) {
				oCase[i].innerText = decodeURI(oCase[i].href.split('case/')[1]);
			}
		})();
	</script>
</body>
</html>